<template>
	<view class="pagesbg">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">累计收益</view>
			</view> 
		</view> 
		
		<view class="">
			<view class="record">
				<view class="sort">
					<picker mode="date" :value="date" fields="month" @change="bindDateChange">
						<view class="uni-input">{{dateShow}}</view>
					</picker>
					<image class="ico" src="@/static/public/icon-down.png" mode=""></image>
				</view>
			<view class="record-wrapper" v-if="isShowPage">
				<scroll-view scroll-y="true" class="record-height" 
				v-if="recordsList.length != 0"
				@scrolltolower="lower()">
					<view class="record-item record-bg" v-for="(item,index) in recordsList" :key="index"
					>
						<view class="record-left">
						<view class="record-title">{{ getSourceType(item.sourceType) }}</view>
						</view>
						<view class="record-right">
							<view class="record-num">{{ item.changeBalance }}</view>
							<view class="record-time record-time--nowrap">{{ item.createTime }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="initNoData" v-if="recordsList.length == 0">暂无记录</view>
			</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				isShowPage: false,
				pages: 1,
				pageIndex: 1,
				pageSize: 20,
				recordsList: [],
				coinType:'',
				coninTypeArr:[
					{type:1,name:'余额'},
					{type:2,name:'兑换消费券'},
					{type:3,name:'消费券'},
					{type:4,name:'贡献值'},
					{type:5,name:'锁定消费券'},
					{type:6,name:'分红消费券'},
				],
				dateShow:'',
				date:'',
			}
		},
		computed:{
			// 99  系统拨付 1 转账 2 买入 3 卖出 4 静态收益 5 推荐收益 6 推荐分红 7 团队分红 8 购买商品
			getSourceType(){
				return function(type){
					switch (type){
						case 1:
							return '转账';
							break;
						case 2:
							return '买入';
							break;
						case 3:
							return '卖出';
							break;
						case 4:
							return '静态收益';
							break;
						case 5:
							return '推荐收益';
							break;
						case 6:
							return '推荐分红';
							break;
						case 7:
							return '团队分红';
							break;
						case 8:
							return '购买商品';
							break;	
						case 99:
							return '系统拨付';
							break;
					}
				}
			},
		},
		onLoad(options) {
			if(options){
				this.coinType = options.value1
			}
			const year =(new Date()).getFullYear()
			const month =(new Date()).getMonth()+1
			this.dateShow = year+'年'+month+'月'
			this.date = year+'-'+month+'-01'
		},
		onShow() {
			this.init();
		},
		onReachBottom() {
			console.log("ddd");
			if (this.pageIndex >= this.pages) {
				return this.$tools.toast('到底了');
			} else {
				this.pageIndex++;
				console.log("+++")
				this.getRecord();
			}
		},
		methods: {
			getCoinType(){
				const type = this.coinType
				const typeName = this.coninTypeArr.filter(item=>item.type == type)[0].name
				console.log('typeName',typeName)
				return typeName;
			},
			init(){
				this.isShowPage = false;
				this.pages = 1;
				this.pageIndex = 1;
				this.recordsList = [];
				this.getRecord();
			},
			// 记录
			getRecord(){
				var data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					coinType:this.coinType,
					month:this.date,
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/money/getUserMoneyLogList',data, res => {
						if(res.code == 200){
							this.isShowPage = true;
							this.pages = res.data.pages;
							this.recordsList = this.recordsList.concat(res.data.list);
							uni.hideLoading();
						}
					}, err => {
						uni.hideLoading();
					}, 'GET'
				);
			},
			bindDateChange(e){
				const time = (e.detail.value).split('-')
				console.log(e,time)
				this.date = e.detail.value +'-01'
				this.dateShow = time[0]+'年'+time[1]+'月'
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.record{
		.sort{
			background: #FFFFFF;
			box-shadow: none;
			margin:  24rpx;
			padding: 36rpx 32rpx;
			@include flexLeft;
			.ico{
				width: 32rpx;
				height: 32rpx;
			}
		}
		&-wrapper{
			margin:  24rpx;
			padding: 36rpx 32rpx;
			background: #FFFFFF;
			box-shadow: none;
			border-radius: 16rpx;
		}
		&-bg{
			box-shadow: none;
		}
		&-item{
			
		}
		&-text{
			margin-top: 36rpx;
		}
		&-status{
			margin-top: 22rpx;
		}
		&-timeBox{
			margin: 30rpx 20rpx 0;
			padding: 0rpx 0 28rpx;
		}
	}	
	
</style>